<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Configure your firmware </title>
    <link rel="stylesheet" href="/styles.css">
  </head>

  <style>
    #activity_indicator_div {
      text-align: center;
    }

    #activity_indicator_background {
      width: 100%;
      background-color: #ddd;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    #activity_indicator {
      left: 35%;
      width: 30%;
      height: 30px;
      background-color: #4CAF50;
      position: relative;
    }
  </style>

  <script>
  var num_dots = 0;
  function submitFirmwareChoice() {
    var dropdown = document.getElementById("firmware_hardware");
    var selection = dropdown.options[dropdown.selectedIndex].value
    if (selection != "skip") {
      document.getElementById("activity_indicator_div").hidden = false;
    }
    document.getElementById("submit_button").hidden = true;
    document.getElementById("firmware_hardware").hidden = true;
    displayActivityIndicator();
  }

  function displayActivityIndicator() {
    var elem = document.getElementById("activity_indicator");
    var width = 30;
    elem.style.width = width + '%';
    var position = 35;
    var step = 1;
    var direction = 1;
    var directionChange = false;
    setInterval(frame, 50);
    function frame() {
      directionChange = direction > 0 ? position >= (100 - width) : position <= 0;
      direction *= directionChange ? -1 : 1;
      position += step * direction;
      elem.style.left = position + '%';
    }
  }

  </script>

  <body>
    <h1>Configure FarmBot</h1>
    <h2><%= subtitle %></h2>

    <div class="widget">
      <div class="widget-header">
        <h5>Firmware</h5>
      </div>
      <div class="widget-content" hidden id="activity_indicator_div">
        Your firmware is flashing.
        <div id="activity_indicator_background">
          <div id="activity_indicator"></div>
        </div>
        Configuration will proceed to the next step once flashing is complete.
      </div>
      <div class="widget-content">
        <form action=configure_firmware method=post>
          <fieldset>
            <select id="firmware_hardware" name=firmware_hardware>
              <option value="arduino"> Arduino/RAMPS (Genesis v1.2) </option>
              <option value="farmduino"> Farmduino (Genesis v1.3) </option>
              <option value="farmduino_k14"> Farmduino (Genesis v1.4) </option>
              <option value="custom"> Custom board </option>
              <option value="skip"> No board connected </option>
            </select>
          </fieldset>
      </div>
    </div>

    <div id="submit_button" class="button">
      <input type="submit" value="next" onclick="submitFirmwareChoice()">
    </div>

    </form>
  </body>
</html>
